<template>
	<el-container class="gross-profit-calculator">
		<el-header class="page-header">
			<div class="title-area">
				<h1 class="page-title">项目定价毛利率计算器</h1>
				<span class="version-info">版本号: 2.1</span>
				<span class="upgrade-info">升级时间: 2025/06/25</span>
			</div>
		</el-header>

		<el-main class="main-content">
			<el-row :gutter="20">
				<!-- 左侧项目清单和套餐合计 -->
				<el-col :span="19" style="background-color: #FFFFFF;">
					<div class="section-title">
						<span class="section-title-text">项目清单</span>
						
						<div class="actions-area">
							<el-button @click="initializePage()" type="primary" plain>页面初始化</el-button>
							<el-button type="primary" @click="predict()">预测</el-button>
						</div>
					</div>
					<div class="section-table">
						<Data ref="dataRef" @data-change="getDataPage" @init="initializePage"></Data>
					</div>
				</el-col>

				<!-- 右侧结果预测 -->
				<el-col :span="5">
					<div class="section-title">
						<span class="section-title-text">结果预测</span>
					</div>
					<div class="section-table" style="background-color: #FFFFFF;">
						<el-table :data="forecast" style="width: 100%" class="prediction-table"  :row-style="{height: '60px'}" :header-row-style="{height: '60px'}" :header-cell-style="headerTableFun" :span-method="spanMethod" :row-class-name="getRowClassName" :cell-style="cellStyle">
							<el-table-column prop="scenario" label="成交价格预测">
								<template #default="scope">
									<span style="font-weight: bold;color: rgba(16,16,16,1);font-size: 14px;">{{ scope.row.scenario }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="transactionPrice" >
								<template #default="scope">
									<span >{{ scope.row.isNone ? '' : '￥' + scope.row.transactionPrice }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="grossProfitRate" width="100" label="成交毛利率预测" align="center" show-overflow-tooltip>
								<template #default="scope">
									{{scope.row.grossProfitRate && scope.row.grossProfitRate != '' && !scope.row.isNone ? scope.row.grossProfitRate + '%' : ''}}
								</template>
							</el-table-column>
						</el-table>
					</div>
					
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>

<script setup lang="ts">
import { ref, shallowRef, toRaw } from 'vue'
import Data from './Data.vue'

interface forecastItem {
	scenario: string,
	transactionPrice: number,
	grossProfitRate: string,
	ratio: number,
	isNone?: boolean
}
const forecast = ref<Array<forecastItem>>([])
forecast.value = [
	{
		scenario: '会员9折',
		transactionPrice: 0,
		grossProfitRate: '',
		ratio: 0.9
	},
	{
		scenario: '会员85折',
		transactionPrice: 0,
		grossProfitRate: '',
		ratio: 0.85
	},
	{
		scenario: '会员8折',
		transactionPrice: 0,
		grossProfitRate: '',
		ratio: 0.8
	},
	{
		scenario: '会员75折',
		transactionPrice: 0,
		grossProfitRate: '',
		ratio: 0.75
	},
	// {
	// 	scenario: '',
	// 	transactionPrice: 0,
	// 	grossProfitRate: '',
	// 	ratio: 0.7,
	// 	isNone: true
	// },
	{
		scenario: '会员7折',
		transactionPrice: 0,
		grossProfitRate: '',
		ratio: 0.7
	},
	
	{
		scenario: '一口价',
		transactionPrice: 0,
		grossProfitRate: '',
		ratio: 1
	}
]

const dataRef = shallowRef<InstanceType<typeof Data>>()


// 预测
const predict = () => {
	dataRef.value?.pageChange()
}


// 初始化
const initializePage = () => {
	dataRef.value?.initializePage()
	forecast.value = [
		{
			scenario: '会员9折',
			transactionPrice: 0,
			grossProfitRate: '',
			ratio: 0.9
		},
		{
			scenario: '会员85折',
			transactionPrice: 0,
			grossProfitRate: '',
			ratio: 0.85
		},
		{
			scenario: '会员8折',
			transactionPrice: 0,
			grossProfitRate: '',
			ratio: 0.8
		},
		{
			scenario: '会员75折',
			transactionPrice: 0,
			grossProfitRate: '',
			ratio: 0.75
		},
		// {
		// 	scenario: '',
		// 	transactionPrice: 0,
		// 	grossProfitRate: '',
		// 	ratio: 0.7,
		// 	isNone: true
		// },
		{
			scenario: '会员7折',
			transactionPrice: 0,
			grossProfitRate: '',
			ratio: 0.7
		},
		
		{
			scenario: '一口价',
			transactionPrice: 0,
			grossProfitRate: '',
			ratio: 1
		}
	]
}

const getDataPage = (data: any) => {
	console.log(toRaw(data))
	let otherPrice = (Number(data.commissionAmount) + Number(data.costPrice) + Number(data.serviceFee)).toFixed(2)
	console.log(otherPrice)
	forecast.value.forEach((item: any) => {
		if(item.scenario == '一口价'){
			item.transactionPrice = (data.activityValue * item.ratio).toFixed(2)
			item.grossProfitRate = ((((data.activityValue * item.ratio) - Number(otherPrice)) / (data.activityValue * item.ratio)) * 100).toFixed(2)
		}else{
			item.transactionPrice = (data.price * item.ratio).toFixed(2)
			item.grossProfitRate = ((((data.price * item.ratio) - Number(otherPrice)) / (data.price * item.ratio)) * 100).toFixed(2)
		}
	})
}


// 合并表头
const headerTableFun = ({row, rowIndex, columnIndex}: any) => {
	// console.log(toRaw(row), toRaw(column), toRaw(rowIndex), toRaw(columnIndex))
	let base = {
        "background-color": "#DCECFF",
        "color": "#333",
        "text-align": "center",
        "z-index": 99,
        width: "calc(200% - 1px)",
		height: '60px',
		overflow: 'hidden',
    	"text-overflow": 'ellipsis',
    	"white-space": 'nowrap'
	}
	if (rowIndex === 0) {
        // 判断对第几列合并  property就是prop传入的属性
        if (row[columnIndex].property === "scenario") {
          return { ...base, "display": "flex", "align-items": "center", "justify-content": "center" };
        } else if (row[columnIndex].property === "transactionPrice") {
          return { "font-size": 0 };
        } 
		else if (row[columnIndex].property === "grossProfitRate") {
          return { ...base, width: '100%',padding: 0 };
        }
	}
}
const spanMethod = ({ row, columnIndex }: any) => {
    // 只处理第一列（group 列）
    if (columnIndex === 0) {
        if (row.isNone) {
            return columnIndex === 0
                ? { rowspan: 1, colspan: 3 }
                : { rowspan: 0, colspan: 0 };
        }
        
    } else {
        return { rowspan: 1, colspan: 1 }
    }
}

const getRowClassName = ({ row }: any) => {
	return row.isEmpty ? 'empty-separator' : '';
}

const cellStyle = ({ row, columnIndex }: any) => {
  // 示例：为第一行第二列的单元格设置背景色
  if (row.isNone && columnIndex === 0) {
    return {
      "border-top": 'none !important',
      "border-left": 'none !important',
      "border-right": 'none !important',
    }
  }
  return {} // 默认返回空对象
}
</script>

<style scoped>
.gross-profit-calculator {
	/* padding: 20px; */
	background-color: #FAF8F8;
	min-height: 100vh;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 0;
	/* Override default el-header padding */
	height: auto;
	/* Adjust height */
	background-color: #fff;
	/* Header background for contrast if needed */
	padding: 15px 20px;
	border-radius: 4px;
	box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
}

.title-area {
	display: flex;
	align-items: center;
}

.page-title {
	font-size: 20px;
	/* font-weight: 600; */
	color: #3098F7;
	margin: 0;
}

.version-info,
.upgrade-info {
	font-size: 12px;
	color: #909399;
	margin-left: 15px;
}

.actions-area .el-button {
	margin-left: 10px;
}

.main-content {
	padding: 0;
	/* Override default el-main padding */
	padding-left: 10px;
	padding-right: 10px;
}

.section-title {
	font-size: 16px;
	font-weight: 500;
	color: #303133;
	margin-bottom: 15px;
	/* border-bottom: 1px solid #EBEEF5; */
	/* Separator like in image */
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	box-sizing: border-box;
}
.section-title-text{
	font-weight: bold;
}
.el-col>.section-title:first-child {
	/* For right column */
	background-color: #fff;
	padding: 19px 20px 10px 20px;
	margin-bottom: 0;
	border-radius: 4px 4px 0 0;
	/* border-bottom: 1px solid #EBEEF5; */
}


.project-table .el-table__header-wrapper th {
	background-color: #FAFAFC !important;
	color: #606266;
	font-weight: 500;
}

.project-table,
.prediction-table {
	border-radius: 4px;
	overflow: hidden;
	/* For border-radius on table */
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .03);
}

.prediction-table {
	border-radius: 0 0 4px 4px;
	/* Only bottom radius for prediction */
}


.quick-search-link {
	font-size: 13px;
}

.quick-search-link .el-link {
	font-size: 13px;
}

.quick-search-link .el-icon {
	font-size: 13px;
	margin-right: 3px;
}

.package-summary {
	margin-top: 20px;
	border: 1px solid #EBEEF5;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .03);
}

.package-title-bar {
	background-color: #FAFAFC;
	padding: 10px 15px;
	border-bottom: 1px solid #EBEEF5;
	display: flex;
	justify-content: space-between;
}

.package-label {
	font-size: 14px;
	font-weight: 500;
	color: #303133;
}

.package-row {
	padding: 10px 15px;
	align-items: center;
}

.package-input-col .el-input {
	font-size: 13px;
}

.package-input-col .el-input .el-input__inner {
	height: 32px;
	line-height: 32px;
}

.package-value-col {
	font-size: 13px;
	color: #606266;
	text-align: right;
	padding-right: 10px;
	/* Spacing for values */
}

.package-actions-col {
	text-align: right;
}

.package-actions-col .el-button {
	margin-left: 10px;
	font-size: 13px;
}

.calculation-logic {
	margin-top: 20px;
	padding: 15px;
	background-color: #fff;
	border-radius: 4px;
	font-size: 13px;
	color: #909399;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .03);
}

.prediction-table .el-table__header-wrapper th {
	background-color: #F0F2F5 !important;
	/* Slightly different header for prediction */
	font-weight: 500;
}

.prediction-table .el-table__cell {
	padding: 10px 12px;
}
.section-table{
	padding: 0px 10px 20px 10px;
	box-sizing: border-box;
}



/* 使用深度选择器确保样式应用到组件内部的 ElementPlus 组件 */
:deep(.el-table) {
  border: none !important;
}

/* 表头样式 */
:deep(.el-table__header-wrapper th) {
  border-right: 1px solid #EBEEF5 !important;
  border-bottom: 1px solid #EBEEF5 !important;
  border-top: 1px solid #EBEEF5 !important;
  border-left: none !important;
  background-color: #f5f7fa !important;
}

/* 第一列表头添加左边框 */
:deep(.el-table__header-wrapper th:first-child) {
  border-left: 1px solid #EBEEF5 !important;
}

/* 单元格样式 */
:deep(.el-table__cell) {
  border-right: 1px solid #EBEEF5 !important;
  border-bottom: 1px solid #EBEEF5 !important;
  border-top: none !important;
  border-left: none !important;
}

/* 第一列单元格添加左边框 */
:deep(.el-table__cell:first-child) {
  border-left: 1px solid #EBEEF5 !important;
}

/* 空白分隔行样式 */
:deep(.el-table__row.empty-separator) {
  height: 30px;
}

:deep(.el-table__row.empty-separator td) {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 分隔行上方的边框 */
:deep(.el-table__row:not(.empty-separator) + .el-table__row.empty-separator td:first-child) {
  box-shadow: inset 0 1px 0 0 #EBEEF5;
}

/* 分隔行下方的边框 */
:deep(.el-table__row.empty-separator + .el-table__row:not(.empty-separator) td) {
  border-top: 1px solid #EBEEF5 !important;
}
</style>